<template>
    <vp-dialog :span="4" ref="editDialogRef" :showCancel="false">
        <template #title>
            <vp-label zh="新增" en="Add Abnormal List" v-if="type === 'add'" />
            <vp-label zh="修改" en="Edit Abnormal List" v-else />
        </template>
        <div class="p10">
            <MaterialApply ref="materialApplyRef" :loading="loading" :type="type">
            </MaterialApply>
            <StatusBar :id="formData.id" :status="formData.zt" :isValid="formData.yxbs" />
        </div>
        <template #footer>
            <PageBottom>
                <vp-btn-save :loading="saveLoading" @click="handleSave(10)" />
                <VpProcessToolBar :loading="saveLoading"
                    :set-loading-fn="(_loading: boolean) => { saveLoading = _loading }" :before-show-fn="beforeShowFn"
                    :after-agree-fn="afterAgreeFn" />
            </PageBottom>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="EditMaterialApply">
import { nextTick, ref } from 'vue';
import { ElMessage } from "element-plus";
import request from '/@/utils/request';
import { stringify } from 'flatted';

import MaterialApply from './materialApply.vue';

import PageBottom from '/@/components/vp/PageBottom/index.vue';
import StatusBar from '/@/components/vp/status/StatusBar.vue';
import VpProcessToolBar from '/@/components/vp/workflow/VpProcessToolBar.vue';

const emits = defineEmits<{
    (e: 'formSubmited'): void
}>()

const loading = ref(false);
const saveLoading = ref(false);
const type = ref('add');

const formData = ref({
    id: '',
    zt: 10,
    yxbs: 1,
});

const editDialogRef = ref();
const materialApplyRef = ref();

const handleOpen = (param: { type: string; id: any; }) => {
    type.value = param.type;
    editDialogRef.value.handleOpen();
    nextTick(() => {
        if (param.type === 'edit') {
            loading.value = true;
            request.get(`/material/materialApply/${param.id}`).then((res) => {
                const data = { ...res.data };
                materialApplyRef.value.setData(data);
                loading.value = false;
            })
        } else {
            materialApplyRef.value.setData({
                ...formData,
                ...param,
            });
        }
    });
}

const handleSave = (zt: number) => {
    if (loading.value) {
        return;
    }
    saveLoading.value = true;
    materialApplyRef.value.getData().then((data: any) => {
        request.post("/material/materialApply/" + type.value, {
            ...data,
            zt: zt,
        }).then(() => {
            ElMessage.success("操作成功/Operation Succeeded");
            emits("formSubmited");
            editDialogRef.value.handleClose();
        }).finally(() => {
            saveLoading.value = false;
        })
    }).catch(() => { saveLoading.value = false; });
}

const beforeShowFn = () => {
    saveLoading.value = true;
    return materialApplyRef.value.getData(20).finally(() => { saveLoading.value = false; });
}

const afterAgreeFn = (processHandle: any) => {
    saveLoading.value = true;
    materialApplyRef.value.getData(20).then((data: any) => {
        console.log(data,"data","/material/materialApply/" + type.value)

        // const dataSring=stringify(data);
        // console.log(dataSring,"dataSring")
        request.post("/material/materialApply/" + type.value, {
            ...data,
            zt: 20,
            processHandle: processHandle,
        }).then(() => {
            ElMessage.success("操作成功/Operation Succeeded");
            editDialogRef.value.handleClose();
            emits("formSubmited");
        }).catch(() => {
        }).finally(() => { saveLoading.value = false; });
    }).catch(() => { saveLoading.value = false; });
}


defineExpose({
    handleOpen
})
</script>